<template>
	<view class="parent-view">
		<view class="tab-view">
			<view class="tab-item" @click="selectTab" data-index="0">
				<image class="tab-image" :src="tabSelectIndex==0?'../../static/order_all_select.png':'../../static/order_all_unselect.png'"/>
				<text class="tab-txt">全部</text>
			</view>
			<view class="tab-item" @click="selectTab" data-index="1">
				<image class="tab-image" style="width: 28px;height: 22px;"
				:src="tabSelectIndex==1?'../../static/order_daifahuo_select.png':'../../static/order_daifahuo_unselect.png'"/>
				<text class="tab-txt">待发货</text>
			</view>
			<view class="tab-item" @click="selectTab" data-index="2">
				<image class="tab-image" style="width: 25px;height: 25px;"
				:src="tabSelectIndex==2?'../../static/order_daishouhuo_select.png':'../../static/order_daishouhuo_unselect.png'"/>
				<text class="tab-txt">待收货</text>
			</view>
			<view class="tab-item" @click="selectTab" data-index="3">
				<image class="tab-image" style="width: 25px;height: 25px;"
				:src="tabSelectIndex==3?'../../static/order_yiwancheng_select.png':'../../static/order_yiwancheng_unselect.png'"/>
				<text class="tab-txt">已完成</text>
			</view>
		</view>
		
		<swiper :current="tabSelectIndex" class="swiper-box" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="spIndex in 4" :key="spIndex">
				<scroll-view class="orders-sc" :scroll-y="true" :show-scrollbar="false"
				@scrolltolower="onreachBottom">
					
					<view class="order-list-view">
						<text v-if="tabSelectIndex==0" class="order-desc">全部</text>
						<view v-if="tabSelectIndex==0" class="order-item" v-for="(item,index) in allOrderList" :key="index" >
							<view class="order-status-view">
								<text class="order-no">订单编号：{{item.ordersn}}</text>
								<text class="order-status" v-if="item.order_status==1">待发货</text>
								<text class="order-status" v-if="item.order_status==2">待收货</text>
								<text class="order-status"  v-if="item.order_status==3">已完成</text>
							</view>
							<view class="good-info-view">
								<image class="good-image" :src="item.goods[0].goods_sku_img"></image>
								<view class="info-view">
									<text class="goods-title">{{item.goods[0].goods_name}}</text>
									<text class="good-count">数量：{{item.goods[0].goods_num}}</text>
									<text class="order-price">订单金额：￥{{item.order_price}}</text>
								</view>
							</view>
							<view class="options-view">
								<text class="order-time">下单时间：{{item.createtime}}</text>
								<text class="order-btn" v-if="item.order_status==1||item.order_status==3"
								@click="lookOrder" :data-index="item">查看订单</text>
								<text class="order-btn" v-if="item.order_status==2" 
								@click="sureOrder" :data-index="item">确认收货</text>
							</view>
						</view>
						
						<text v-if="tabSelectIndex==1" class="order-desc">待发货</text>
						<view v-if="tabSelectIndex==1" class="order-item" v-for="(item,index) in dfhOrderList" :key="index" >
							<view class="order-status-view">
								<text class="order-no">订单编号：{{item.ordersn}}</text>
								<text class="order-status" v-if="item.order_status==1">待发货</text>
								<text class="order-status" v-if="item.order_status==2">待收货</text>
								<text class="order-status"  v-if="item.order_status==3">已完成</text>
							</view>
							<view class="good-info-view">
								<image class="good-image" :src="item.goods[0].goods_sku_img"></image>
								<view class="info-view">
									<text class="goods-title">{{item.goods[0].goods_name}}</text>
									<text class="good-count">数量：{{item.goods[0].goods_num}}</text>
									<text class="order-price">订单金额：￥{{item.order_price}}</text>
								</view>
							</view>
							<view class="options-view">
								<text class="order-time">下单时间：{{item.createtime}}</text>
								<text class="order-btn" v-if="item.order_status==1||item.order_status==3"
								@click="lookOrder" :data-index="item">查看订单</text>
								<text class="order-btn" v-if="item.order_status==2"
								@click="sureOrder" :data-index="item">确认收货</text>
							</view>
						</view>
						
						<text v-if="tabSelectIndex==2" class="order-desc">待收货</text>
						<view v-if="tabSelectIndex==2" class="order-item" v-for="(item,index) in dshOrderList" :key="index" >
							<view class="order-status-view">
								<text class="order-no">订单编号：{{item.ordersn}}</text>
								<text class="order-status" v-if="item.order_status==1">待发货</text>
								<text class="order-status" v-if="item.order_status==2">待收货</text>
								<text class="order-status"  v-if="item.order_status==3">已完成</text>
							</view>
							<view class="good-info-view">
								<image class="good-image" :src="item.goods[0].goods_sku_img"></image>
								<view class="info-view">
									<text class="goods-title">{{item.goods[0].goods_name}}</text>
									<text class="good-count">数量：{{item.goods[0].goods_num}}</text>
									<text class="order-price">订单金额：￥{{item.order_price}}</text>
								</view>
							</view>
							<view class="options-view">
								<text class="order-time">下单时间：{{item.createtime}}</text>
								<text class="order-btn" v-if="item.order_status==1||item.order_status==3"
								@click="lookOrder" :data-index="item">查看订单</text>
								<text class="order-btn" v-if="item.order_status==2"
								@click="sureOrder" :data-index="item">确认收货</text>
							</view>
						</view>
						
						<text v-if="tabSelectIndex==3" class="order-desc">已完成</text>
						<view v-if="tabSelectIndex==3" class="order-item" v-for="(item,index) in ywcOrderList" :key="index" >
							<view class="order-status-view">
								<text class="order-no">订单编号：{{item.ordersn}}</text>
								<text class="order-status" v-if="item.order_status==1">待发货</text>
								<text class="order-status" v-if="item.order_status==2">待收货</text>
								<text class="order-status"  v-if="item.order_status==3">已完成</text>
							</view>
							<view class="good-info-view">
								<image class="good-image" :src="item.goods[0].goods_sku_img"></image>
								<view class="info-view">
									<text class="goods-title">{{item.goods[0].goods_name}}</text>
									<text class="good-count">数量：{{item.goods[0].goods_num}}</text>
									<text class="order-price">订单金额：￥{{item.order_price}}</text>
								</view>
							</view>
							<view class="options-view">
								<text class="order-time">下单时间：{{item.createtime}}</text>
								<text class="order-btn" v-if="item.order_status==1||item.order_status==3"
								@click="lookOrder" :data-index="item">查看订单</text>
								<text class="order-btn" v-if="item.order_status==2"
								@click="sureOrder" :data-index="item">确认收货</text>
							</view>
						</view>
						
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import request from '../index/request.js';
	export default {
		data() {
			return {
				tabSelectIndex:0,
				allPage:1,
				allOrderList:[],
				dfhPage:1,
				dfhOrderList:[],
				dshPage:1,
				dshOrderList:[],
				ywcPage:1,
				ywcOrderList:[],
			}
		},
		methods: {
			onLoad: function(options) {
				this.appUtil.saveAppInviteId(options)
				this.getOrderListData(1,0)
				this.getOrderListData(1,1)
				this.getOrderListData(1,2)
				this.getOrderListData(1,3)
			},
			onShow:function(){
				this.share.url='/pages/tabBar/home/index?appInviteId='+this.appUtil.getAppInviteId()
				this.share.shareType=1
			},
			ontabchange: function(e) {
				this.tabSelectIndex = e.target.current || e.detail.current;
			},
			selectTab:function(e){
				this.tabSelectIndex=e.currentTarget.dataset.index
			},
			
			/** scroll-view到底部加载更多 */
			onreachBottom:function() {
				console.log("底部加载更多")
				switch(this.tabSelectIndex){
					case 0:
						this.allPage=this.allPage+1
						this.getOrderListData(this.allPage,this.tabSelectIndex)
						break
					case 1:
						this.dfhPage=this.dfhPage+1
						this.getOrderListData(this.dfhPage,this.tabSelectIndex)
						break
					case 2:
						this.dshPage=this.dshPage+1
						this.getOrderListData(this.dshPage,this.tabSelectIndex)
						break
					case 3:
						this.ywcPage=this.ywcPage+1
						this.getOrderListData(this.ywcPage,this.tabSelectIndex)
						break
				}
			},
			sureOrder:function(e){
				var data=e.currentTarget.dataset.index
				var that=this
				request.post("api/mall/DelUserAddress", {
					ordersn:data.ordersn
				}).then(data => {
					this.getOrderListData(1,0)
					this.getOrderListData(1,1)
					this.getOrderListData(1,2)
					this.getOrderListData(1,3)
				})
			},
			getOrderListData:function(page,status){
				var that=this
				request.post("api/mall/mall_order_list", {
					page:page,
					status:status,
				}).then(data => {
					switch(status){
						case 0:
							if(page==1){
								that.allOrderList=data
							}else{
								for (var i = 0; i < data.length; i++) {
									that.allOrderList.push(data[i])
								}
							}
							break;
						case 1:
							if(page==1){
								that.dfhOrderList=data
							}else{
								for (var i = 0; i < data.length; i++) {
									that.dfhOrderList.push(data[i])
								}
							}
							break;
						case 2:
							if(page==1){
								that.dshOrderList=data
							}else{
								for (var i = 0; i < data.length; i++) {
									that.dshOrderList.push(data[i])
								}
							}
							break;
						case 3:
							if(page==1){
								that.ywcOrderList=data
							}else{
								for (var i = 0; i < data.length; i++) {
									that.ywcOrderList.push(data[i])
								}
							}
							break;
						default:
							break;
					}
				})
			},
			lookOrder:function(e){
				var data=e.currentTarget.dataset.index
				uni.navigateTo({
					url:"../shopping-goods-order-detail/index?ordersn="+data.ordersn
				})
			},
		}
	}
</script>

<style>
	@import "index.css";
</style>
